import { ForwardRefRenderFunction, useEffect, memo, useImperativeHandle, forwardRef, useCallback } from 'react'
import { EMPTYTEXT } from '@hs-admin/utils'
import { useImmer } from 'use-immer'
import { HsAdminTable } from '@hs-admin/base-components'
import { Space, Button, Switch } from 'antd'
import { useTypeStore } from '@/store/useOperationDataItem'
import { reqDataItemColumns } from '@/api/assetMaintain/basic/item'

interface Props {
  dataItem: any
  back: () => void
  finish: (params: any) => void
}

const Step2: ForwardRefRenderFunction<unknown, Props> = (props: Props, ref: any) => {
  const { dataItem, back, finish } = props
  let { id } = dataItem
  const tabKey = useTypeStore((state) => state.tabKey)
  const setTabKey = useTypeStore((state) => state.setTabKey)
  const data_item_id = useTypeStore((state) => state.data_item_id)
  const data_item_infor = useTypeStore((state) => state.data_item_infor)
  if (!id && data_item_id) {
    id = data_item_id
  }

  const [data, setData] = useImmer<any[]>([])
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (_: any, _record: any, index: number) => <span>{index + 1}</span>
    },
    {
      title: '字段名',
      dataIndex: 'name'
    },
    {
      title: '中文名',
      dataIndex: 'comment'
    },
    {
      title: '字段说明',
      dataIndex: 'description'
    },
    {
      title: '是否核心',
      dataIndex: 'is_core_field',
      render: (_: any, record: any) => {
        const coreType = new Map([
          [false, '否'],
          [true, '是'],
          [null, EMPTYTEXT]
        ])
        const name = coreType.get(record.is_core_field)
        return <span>{name}</span>
      }
    },
    {
      title: '安全等级',
      dataIndex: 'security_level'
    },
    {
      title: '可搜索',
      dataIndex: 'searchable',
      render: (_: any, record: any) => <Switch checked={record.searchable} disabled />
    },
    {
      title: '可查询',
      dataIndex: 'queryable',
      render: (_: any, record: any) => <Switch checked={record.queryable} disabled />
    },
    {
      title: '可提供',
      dataIndex: 'available',
      render: (_: any, record: any) => <Switch checked={record.available} disabled />
    }
  ]
  const [scrollHeight] = useImmer('calc(66vh)')

  const goStep3 = async () => {
    setTabKey('3')
  }
  const getList = async () => {
    const params = {
      id
    }
    const res = await reqDataItemColumns(params)
    if (res.length) {
      setData(res)
    }
  }
  const cancel = useCallback(async () => {
    setData([])
  }, [setData])

  useEffect(() => {
    if (tabKey === '2') {
      getList()
    }
  }, [tabKey])

  useImperativeHandle(
    ref,
    () => {
      return {
        cancel
      }
    },
    [cancel]
  )

  return (
    <>
      <HsAdminTable columns={columns} dataSource={data} pagination={false} scroll={{ y: scrollHeight }} size="small" rowKey="id"></HsAdminTable>
      <br />
      <Space className="flex justify-end">
        <Button onClick={back}>取消</Button>
        <Button type="primary" onClick={goStep3}>
          下一步
        </Button>
        <Button type="primary" onClick={() => finish(data_item_infor)}>
          确定
        </Button>
      </Space>
    </>
  )
}

export default memo(forwardRef(Step2))
